<template>
  <div>
    <h1>手工批量装车 未开发</h1>
  </div>
</template>

<script>
export default {
  props: {
    columns: {
      type: Array,
      required: true,
    },
    fetchData: {
      type: Function,
      required: true,
    },
    saveData: {
      type: Function,
      required: true,
    },
  },
  data() {
    return {
      tableData: [],
    };
  },
  created() {
    this.fetchData().then((data) => {
      this.tableData = data;
    });
  },
  methods: {
    handleAdd() {
      const newRow = {};
      this.columns.forEach((column) => {
        newRow[column.prop] = "";
      });
      newRow.editable = true;
      this.tableData.push(newRow);
    },
    handleSave() {
      const dataToSave = this.tableData.filter((row) => !this.isEmptyRow(row));
      dataToSave.forEach((row) => {
        row.editable = false;
      });
      this.saveData(dataToSave);
    },
    editRow(row) {
      if (!row.editable) {
        this.tableData = this.tableData.map((item) => {
          if (item === row) {
            return { ...item, editable: true };
          }
          return { ...item, editable: false };
        });
      }
    },
    saveRow(row) {
      row.editable = false;
    },
    isEmptyRow(row) {
      return this.columns.every((column) => !row[column.prop]);
    },
  },
};
</script>
